<template>
  <div class="layout-card">
    <div class="demo-container">
      <!-- Card 组件展示 -->
      <div class="text-h6 q-mb-md">Card 组件示例</div>
      <div class="row q-col-gutter-md q-mb-xl">
        <!-- 基础卡片 -->
        <div class="col-12 col-sm-6 col-md-4">
          <q-card class="my-card">
            <q-img src="https://cdn.quasar.dev/img/mountains.jpg" />
            <q-card-section>
              <div class="text-h6">基础卡片</div>
              <div class="text-subtitle2">基本的卡片布局</div>
            </q-card-section>
            <q-card-section> 这是一个基础卡片示例，包含图片、标题和内容。 </q-card-section>
            <q-card-actions align="right">
              <q-btn flat>取消</q-btn>
              <q-btn color="primary">确定</q-btn>
            </q-card-actions>
          </q-card>
        </div>

        <!-- 带悬浮效果的卡片 -->
        <div class="col-12 col-sm-6 col-md-4">
          <q-card class="my-card" flat bordered>
            <q-card-section horizontal>
              <q-card-section class="q-pt-xs">
                <div class="text-h6">悬浮效果卡片</div>
                <div class="text-subtitle2">带有阴影效果</div>
                <div class="text-caption text-grey">鼠标悬浮时会有阴影效果的卡片</div>
              </q-card-section>
              <q-card-section class="col-5 flex flex-center">
                <q-img class="rounded-borders" src="https://cdn.quasar.dev/img/parallax2.jpg" />
              </q-card-section>
            </q-card-section>
            <q-separator />
            <q-card-actions>
              <q-btn flat round icon="event" />
              <q-btn flat> 查看详情 </q-btn>
            </q-card-actions>
          </q-card>
        </div>

        <!-- 带展开面板的卡片 -->
        <div class="col-12 col-sm-6 col-md-4">
          <q-card class="my-card">
            <q-card-section>
              <div class="text-h6">展开面板卡片</div>
              <div class="text-subtitle2">点击展开查看更多</div>
            </q-card-section>
            <q-card-section>
              <q-expansion-item icon="explore" label="展开查看详情" caption="点击展开">
                <q-card>
                  <q-card-section> 这里是展开后显示的详细内容。 </q-card-section>
                </q-card>
              </q-expansion-item>
            </q-card-section>
            <q-separator />
            <q-card-actions vertical>
              <q-btn flat>分享</q-btn>
              <q-btn flat>详情</q-btn>
            </q-card-actions>
          </q-card>
        </div>
      </div>

      <!-- Tree 组件展示 -->
      <div class="text-h6 q-mb-md">Tree 组件示例</div>
      <div class="row q-col-gutter-md">
        <!-- 基础树形控件 -->
        <div class="col-12 col-md-6">
          <q-card>
            <q-card-section>
              <div class="text-subtitle1">基础树形控件</div>
              <q-tree :nodes="simpleNodes" node-key="id" default-expand-all />
            </q-card-section>
          </q-card>
        </div>

        <!-- 自定义树形控件 -->
        <div class="col-12 col-md-6">
          <q-card>
            <q-card-section>
              <div class="text-subtitle1">自定义树形控件</div>
              <q-tree
                :nodes="customNodes"
                node-key="id"
                default-expand-all
                :custom-content="customContent"
              >
                <template v-slot:custom-content="prop">
                  <div class="row items-center">
                    <q-icon :name="prop.node.icon" color="primary" size="28px" class="q-mr-sm" />
                    <div class="text-weight-medium">{{ prop.node.label }}</div>
                    <q-space />
                    <q-chip v-if="prop.node.count" color="primary" text-color="white" size="sm">
                      {{ prop.node.count }}
                    </q-chip>
                  </div>
                </template>
              </q-tree>
            </q-card-section>
          </q-card>
        </div>

        <!-- 可选择的树形控件 -->
        <div class="col-12 col-md-6">
          <q-card>
            <q-card-section>
              <div class="text-subtitle1">可选择的树形控件</div>
              <q-tree
                :nodes="selectableNodes"
                node-key="id"
                tick-strategy="strict"
                v-model:ticked="ticked"
                v-model:selected="selected"
              />
            </q-card-section>
          </q-card>
        </div>

        <!-- 异步加载的树形控件 -->
        <div class="col-12 col-md-6">
          <q-card>
            <q-card-section>
              <div class="text-subtitle1">异步加载的树形控件</div>
              <q-tree :nodes="asyncNodes" node-key="id" :load-children="loadChildren" />
            </q-card-section>
          </q-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 基础树节点数据
const simpleNodes = [
  {
    id: 1,
    label: '项目文档',
    children: [
      {
        id: 2,
        label: '开发文档',
        children: [
          { id: 3, label: '前端规范' },
          { id: 4, label: '后端规范' },
        ],
      },
      {
        id: 5,
        label: '设计文档',
        children: [
          { id: 6, label: 'UI设计规范' },
          { id: 7, label: '交互规范' },
        ],
      },
    ],
  },
]

// 自定义树节点数据
const customNodes = [
  {
    id: 1,
    label: '项目管理',
    icon: 'folder',
    count: 3,
    children: [
      {
        id: 2,
        label: '进行中',
        icon: 'play_circle',
        count: 2,
        children: [
          { id: 3, label: '项目A', icon: 'assignment' },
          { id: 4, label: '项目B', icon: 'assignment' },
        ],
      },
      {
        id: 5,
        label: '已完成',
        icon: 'check_circle',
        count: 1,
        children: [{ id: 6, label: '项目C', icon: 'assignment' }],
      },
    ],
  },
]

// 可选择的树节点数据
const selectableNodes = [
  {
    id: 1,
    label: '权限管理',
    children: [
      {
        id: 2,
        label: '用户管理',
        children: [
          { id: 3, label: '查看用户' },
          { id: 4, label: '编辑用户' },
          { id: 5, label: '删除用户' },
        ],
      },
      {
        id: 6,
        label: '角色管理',
        children: [
          { id: 7, label: '查看角色' },
          { id: 8, label: '编辑角色' },
          { id: 9, label: '删除角色' },
        ],
      },
    ],
  },
]

// 异步树节点数据
const asyncNodes = [
  {
    id: 1,
    label: '异步节点1',
    lazy: true,
  },
  {
    id: 2,
    label: '异步节点2',
    lazy: true,
  },
]

// 选中状态
const selected = ref(null)
const ticked = ref([])

// 异步加载子节点
const loadChildren = (node) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        {
          id: `${node.id}.1`,
          label: `子节点 ${node.id}.1`,
          lazy: true,
        },
        {
          id: `${node.id}.2`,
          label: `子节点 ${node.id}.2`,
          lazy: true,
        },
      ])
    }, 1000)
  })
}
</script>

<style lang="scss" scoped>
.demo-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.my-card {
  width: 100%;
  transition: box-shadow 0.3s;

  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
}
</style>
